<template>
  <div class="container-big wing-blank forward-active-page">
    <div class="forward-active-card">
      <img src="https://gw.alicdn.com/tfs/TB1dI3SHmzqK1RjSZFjXXblCFXa-1380-1600.png" class="active-card-bg">
      <div class="alibaba-design" />
      <div class="forward-active-ucan-title">
        <img src="https://gw.alicdn.com/tfs/TB1j1kNHbPpK1RjSZFFXXa5PpXa-201-32.png" class="logo-title">
        设计大会
      </div>
      <p class="forward-active-card-sub-title">
        [转送票激活]
      </p>
      <p class="forward-active-card-desc">
        请务必在2019年4月25日24点前完成激活，以免逾期失效
      </p>

      <co-list form>
        <co-list-item>
          <span class="active-form-label">
            手机号
          </span>
          <co-input slot="right" v-model="mobile" placeholder="请输入受赠人手机号" />
        </co-list-item>
        <co-list-item>
          <span class="active-form-label">
            激活码
          </span>
          <co-input slot="right" v-model="code" placeholder="请输入激活码" />
        </co-list-item>
        <co-list-item link class="active-must-item" @click.stop="goToFillInForm">
          用票人信息采集
          <span slot="right">
            {{ receiverName }}
          </span>
        </co-list-item>
      </co-list>
      <co-button block color="primary" class="forward-active-submit" :disabled="!canSubmit" :loading="processing" @click.stop="submit">
        立即激活
      </co-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import services from "../../api/forward";

export default {
  data() {
    return {
      code: "",
      mobile: "",
      processing: false
    };
  },
  mounted() {
    const { code } = this.$route.query;
    this.code = (code && code.trim()) || "";

    if (this.storedMobile) {
      this.mobile = this.storedMobile;
    }
  },
  methods: {
    ...mapMutations("forward", ["updateMobile"]),
    async submit() {
      try {
        this.processing = true;
        const objFormData = this.mapFormArrayToObject(this.formData);
        const submitFormData = {
          activityId: 1,
          countryCode: "86",
          country: "中国",
          inviteCode: this.code,
          name: objFormData.uName,
          tel: this.mobile,
          uEmail: objFormData.uEmail,
          job: objFormData.JOB,
          uIdCard: objFormData.uIdCard,
          industry: objFormData.industry,
          company: objFormData.company
        };
        await services.receive(submitFormData);
        this.$router.push({
          path: "/forward/active/success",
          query: {
            mobile: this.mobile
          }
        });
        this.processing = false;
      } catch (err) {
        this.processing = false;
      }
    },
    // 填写用户人信息
    goToFillInForm() {
      this.updateMobile(this.mobile);
      this.$router.push({
        path: "/infoEntryGive",
        query: {
          isReadonly: true
        }
      });
    },
    /**
     * convert from
     * [{ attribue: { fieldCode: 'uName', fieldValue: 1 }}, { attribue: { fieldCode: 'uEmail', fieldValue: 2 }}]
     * to
     * { uName: 1, uEmail: 2 }
     **/
    mapFormArrayToObject(formData) {
      return !Array.isArray(formData)
        ? {}
        : formData.reduce((acc, curr) => {
            const key =
              (curr && curr.attribute && curr.attribute.filedCode) || null;
            const value =
              (curr && curr.attribute && curr.attribute.filedValue) || null;
            return key && value ? { ...acc, [key]: value } : acc;
          }, {});
    }
  },
  computed: {
    ...mapState({
      formData: state => state.forward.formData,
      storedMobile: state => state.forward.mobile
    }),
    receiverName() {
      return (
        (this.formData &&
          this.formData[0] &&
          this.formData[0].attribute &&
          this.formData[0].attribute.filedValue) ||
        "必填"
      );
    },
    isMobileValid() {
      return /^\d{11}$/.test(this.mobile);
    },
    canSubmit() {
      return this.code && this.isMobileValid && this.formData;
    }
  }
};
</script>
<style lang="less">
.forward-active-page {
  padding-top: 30px;
  text-align: left;
  .forward-active-card {
    padding: 40px 30px 50px;
    position: relative;
    z-index: 1;
    .active-card-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .alibaba-design {
      left: 30px;
      top: 24px;
      width: 91px;
      height: 16px;
    }
    .active-share-icon {
      font-size: 56px;
      position: absolute;
      right: 24px;
      top: 24px;
    }
    .active-form-label {
      width: 130px;
    }
  }

  .active-must-item {
    .co-list-item-right {
      color: #fff;
    }
    .co-list-item-link {
      color: #d7d8d9;
      font-size: 18px;
    }
  }

  .forward-active-ucan-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 40px;
    .logo-title {
      width: 200px;
      margin-right: 5px;
    }
  }

  .forward-active-card-sub-title {
    font-size: 40px;
    margin-top: 10px;
  }

  .forward-active-card-desc {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
  }

  .forward-active-submit {
    border-radius: 2px;
    height: 96px;
    font-size: 32px;
    margin-top: 30px;
  }
}
</style>
